<template>
  <div id="container">
    <div id="receipt-page">
      <div class="card">
        <div class="icon"></div>
        <h1>订单提交成功!</h1>
        <p>The order has been submitted successfully!</p>
      </div>
      <div class="card">
        <ul>
          <li>
            <span>支付宝</span>
            <span>付款</span>
          </li>
          <li>
            <span>感谢您:：{{ orderData.users?.username || '未知用户' }} !</span>
            <span> 购买本网站的商品</span>
          </li>
          <li>
            <span>付款成功！</span>

          </li>
          <li>
            <span>支付时间：{{ paymentTime }}</span>
          </li>
          <li>
            <span>应付金额</span>
            <span>￥{{ totalPrice }}</span>
          </li>
          <li>
            <span>订单编号：</span>
            <span>{{ orderData.paymentnumber }}</span>
          </li>
        </ul>
      </div>
      <div class="card">
        <div class="cta-row">
          <button class="secondary" @click="goToHome">返回首页</button>
          <button>发现更多好东西</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import './style.css'
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import router from "@/router/index.js";

// 获取路由参数
const route = useRoute();
const orderNumber = route.query.out_trade_no; // 从 URL 获取订单号

// 定义响应数据的变量
const orderData = ref({});
const paymentTime = ref('');
const totalPrice = ref(0);

// 获取订单信息并更新 UI
onMounted(async () => {
  try {
    // 发送 GET 请求，带上参数
    const response = await axios.get('http://localhost:8080/order/sumbYes', {
      params: {
        randomNumber: orderNumber
      }
    });

    // 假设返回的数据结构符合给定的格式
    if (response.data.status === 200) {
      orderData.value = response.data.data;
      paymentTime.value = new Date(orderData.value.updatedat).toLocaleString(); // 格式化日期
      totalPrice.value = orderData.value.totalprice;

      // 打印获取到的数据到控制台
      console.log('订单信息:', orderData.value);
    } else {
      console.error('订单信息查询失败:', response.data.message);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
});

// 跳转到首页
const goToHome = () => {
  router.push("/"); // 跳转到首页
};
</script>
